<script src="../../../utils/icon.js"></script>
<template>
    <div class="container-fluid">
        <div class="panel panel-info">
            <vxe-toolbar class="panel-heading">
                <template #buttons>
                    <div class="row">
                        <div class="col-1">
                            <vxe-button type="text" status="info" icon="fa fa-chevron-left"
                                        @click="$router.push('/sys/menu?action=back')" content="列表"
                                        :loading="isLoading">
                            </vxe-button>
                        </div>
                        <div class="col-10" style="text-align: center;">
                            <label>添加菜单</label>
                        </div>
                    </div>
                </template>
            </vxe-toolbar>
            <div class="panel-body">
                <vxe-form ref="menuForm" :data="menu" :rules="menuRules" span="24" title-align="right" title-width="100"
                          title-asterisk>
                    <vxe-form-item field="name" title="名称">
                        <template #default="params">
                            <vxe-input class="input" v-model="menu.name" placeholder="请输入菜单名称" clearable
                                       @input="$refs.menuForm.updateStatus(params)"></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="模块名" field="moduleName">
                        <template #default="params">
                            <vxe-input v-model="menu.moduleName" placeholder="请输入菜单的模块名称" clearable
                                       @input="$refs.menuForm.updateStatus(params)"></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="控制器名" field="actionName">
                        <template #default="params">
                            <vxe-input v-model="menu.actionName" placeholder="请输入菜单的控制器名称" clearable
                                       @input="$refs.menuForm.updateStatus(params)"></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="方法名" field="functionName">
                        <template #default="params">
                            <vxe-input v-model="menu.functionName" placeholder="请输入菜单的方法名称" clearable
                                       @input="$refs.menuForm.updateStatus(params)"></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="图标" field="icon">
                        <template #default="params">
                            <input id="icon" name="icon" class="form-control"/>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="父级菜单" field="parentId">
                        <template #default="params">
                            <vxe-input v-model="menu.parentMenuName" placeholder="点击选择父级菜单，不选视为一级菜单"
                                       @focus="showParentMenuSelect">
                            </vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="排序" field="sort">
                        <template #default="params">
                            <vxe-input type="number" v-model="menu.sort" placeholder="请输入菜单排序" clearable
                                       @input="$refs.menuForm.updateStatus(params)"></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="是否菜单" field="isMenu">
                        <template #default="params">
                            <vxe-switch v-model="menu.isMenu" open-label="是" close-label="否" open-value="1"
                                        close-value="0" open-icon="fa fa-check"
                                        close-icon="fa fa-close"></vxe-switch>
                        </template>
                    </vxe-form-item>
                </vxe-form>
            </div>
            <div class="panel-footer" style="text-align: center;">
                <vxe-button type="text" status="success" icon="fa fa-save" @click="submit()" :content="btnSubmitName"
                            :loading="isLoading">
                </vxe-button>
            </div>
        </div>
        <vxe-modal v-model="parentMenuIsShow" id="parent-menu-modal" width="900" height="400" min-width="460"
                   min-height="320" show-zoom resize remember storage transfer maskClosable>
            <template #title>
                点击选择父级菜单
            </template>
            <template #default>
                <vxe-table resizable
                           highlight-current-row
                           ref="xTable"
                           :tree-config="{children: 'children',iconOpen: 'fa fa-chevron-down', iconClose: 'fa fa-chevron-right'}"
                           :radio-config="{labelField: 'name', trigger: 'row'}"
                           :data="list"
                           @current-change="currentChangeEvent">
                    <vxe-column title="名称" field="name" tree-node>
                        <template #header>
                            <vxe-button type="text" @click="clearCurrentRowEvent" :disabled="!selectRow">取消</vxe-button>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </vxe-modal>
    </div>
</template>
<script>
import icon from '../../../../static/plus/fontIconPicker/icon.js'

export default {
    name: 'SysMenuAdd',
    data () {
        return {
            isLoading: false,
            btnSubmitName: '保存',
            menu: {
                name: '',
                moduleName: '',
                actionName: '',
                functionName: '',
                sort: '',
                isMenu: '1',
                parentId: null,
                parentMenuName: '',
                icon: ''
            },
            menuRules: {
                name: [{required: true, message: '菜单名称必填'}, {min: 2, max: 10, message: '菜单名称在两个到十个字符之间'}],
                moduleName: [{required: true, message: '模块名称必填'}, {min: 1, max: 10, message: '模块名称在一到10个字符之间'}],
                actionName: [{required: true, message: '控制器名称必填'}, {min: 1, max: 10, message: '控制器名称在一到10个字符之间'}],
                functionName: [{required: true, message: '方法名称必填'}, {min: 1, max: 10, message: '方法名称在一到10个字符之间'}],
                sort: [{required: true, message: '请输入菜单排序'}],
                isMenu: [{required: true}]
            },
            parentMenuIsShow: false,
            list: [],
            selectRow: null
        }
    },
    created () {
        this.loadMenus()
    },
    mounted () {
        setTimeout(() => {
            //$('#icon').val('fa fa-user');
            let fip = $('#icon').fontIconPicker({
                source: icon.icon,
                theme: 'fip-darkgrey'
            })
        }, 100)
    },
    methods: {
        loadMenus () {
            this.$request.get(this.$apiSys.menuListUrl).then(res => {
                this.list = res.rows
                console.log(this.list)
            })
        },
        submit () {
            this.menu.icon = $('#icon').val()
            this.$refs.menuForm.validate(result => {
                console.log(result)
                if (result !== undefined) {
                    this.$XModal.alert('请检查表单是否填写正确')
                    return false
                }
                this.isLoading = true
                this.btnSubmitName = '正在保存...'
                this.$request.post(this.$apiSys.menuAddUrl, this.menu, true).then(res => {
                    if (res.status) {
                        this.$XModal.message({content: res.msg, status: 'success'})
                        this.$router.push('/sys/menu')
                    }
                    this.isLoading = false
                    this.btnSubmitName = '保存'
                }, err => {
                    this.isLoading = false
                    this.btnSubmitName = '保存'
                })
            })
        },
        currentChangeEvent ({row}) {
            this.selectRow = row
            this.menu.parentId = row.id
            this.menu.parentMenuName = row.name
            this.parentMenuIsShow = false
            console.log(this.menu.parentId)
        },
        clearCurrentRowEvent () {
            this.selectRow = null
            this.$refs.xTable.clearRadioRow()
            this.$refs.xTable.clearCurrentRow()
            this.menu.parentId = null
            this.menu.parentMenuName = ''
            this.parentMenuIsShow = false
        },
        showParentMenuSelect () {
            this.parentMenuIsShow = true
            // this.$nextTick(() => {
            //   this.$refs.xTable.setAllTreeExpand(true)
            // })
        }
    }
}
</script>

<style>
</style>
